<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script src="../1.前期Vue/vue.js"></script>
</head>
<!--
    常用的生命周期钩子：
        1.mounted：发送ajax请求，启动定时器，绑定自定义事件，订阅消息等初始化操作
        2.beforeDestroy：清楚定时器，解绑自定义事件，取消订阅消息等收尾工作

    关于销毁Vue实例：
        1.销毁后，借助Vue开发工具看不到任何信息
        2.销毁后自定义事件会失效，但原生DOM事件依旧有效
        3.一般不会再beforeDestroy操作数据,因为即使操作数据，也不会触发更新流程了

-->
<body>
<div id="root">
  <h2 :style="{opacity}">欢迎学习{{n}}</h2>
    <button @click="add">add</button>
    <button @click="stop">add</button>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            n:1,
            opacity:1
        },
        methods:{
          add(){
              this.n++
          },
            stop(){
              // clearInterval(this.id)
                this.$destroy()
            }

        },
        //完成vue的解析并将真实Dom放入页面(挂在完毕不是更新)后调用mounted
        mounted(){
        this.id = setInterval(()=>{
                    this.opacity-=0.01
                    if(this.opacity <=0) this.opacity = 1
        },16)
        },

    })
</script>
</html>
